<route lang="json5" type="page">
{
  "needLogin": true,
  style: {
    navigationBarTitleText: '维修详情',
  }
}
</route>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 维修详情数据类型
interface RepairDetail {
  id: number
  contact: string
  phone: string
  emergencyPhone: string
  houseNumber: string
  category: string
  repairId: string
  reason: string
  images: string[]
  status: 'pending' | 'processing' | 'completed'
  createTime: string
  problem: string
}

// 维修详情数据
const repairDetail = ref<RepairDetail>({
  id: 0,
  contact: '李先生',
  phone: '18646801234',
  emergencyPhone: '18646805678',
  houseNumber: '7号楼607',
  category: '预付费水表',
  repairId: '10555758455',
  problem: '水表漏水',
  reason: '水表显示异常，无法正常读数，需要技术人员检查维修。用户反映最近几天水表数字显示不清晰，担心影响正常用水计费。',
  images: [
    '/static/images/default-avatar.png',
  ],
  status: 'pending',
  createTime: '2024-01-15 14:30:00',
})

// 模拟维修详情数据
const mockDetailData: Record<number, RepairDetail> = {
  1: {
    id: 1,
    contact: '李先生',
    phone: '18646801234',
    emergencyPhone: '18646805678',
    houseNumber: '7号楼501',
    category: '预付费水表',
    repairId: '10555758455',
    problem: '水表漏水',
    reason: '水表显示异常，无法正常读数，需要技术人员检查维修。用户反映最近几天水表数字显示不清晰，担心影响正常用水计费。',
    images: [
      '/static/images/default-avatar.png',
      '/static/images/avatar.jpg',
      '/static/logo.svg',
      '/static/images/default-avatar.png',
      '/static/images/avatar.jpg',
    ],
    status: 'pending',
    createTime: '2023-06-06 14:30:00',
  },
  2: {
    id: 2,
    contact: '王女士',
    phone: '18646801235',
    emergencyPhone: '18646805679',
    houseNumber: '6号楼502',
    category: '智能电表',
    repairId: '10555758456',
    problem: '频繁跳闸',
    reason: '家中电表频繁跳闸，影响正常用电。初步判断可能是电表内部故障或者线路问题，需要专业人员检查。',
    images: [
      '/static/images/avatar.jpg',
      '/static/logo.svg',
      '/static/images/default-avatar.png',
    ],
    status: 'processing',
    createTime: '2023-06-06 15:20:00',
  },
  3: {
    id: 3,
    contact: '张先生',
    phone: '18646801236',
    emergencyPhone: '18646805680',
    houseNumber: '5号楼501',
    category: '智能电表',
    repairId: '10555758457',
    problem: '电表烧坏',
    reason: '电表外壳烧焦，疑似因电压不稳定导致。已切断电源，急需更换新电表恢复正常供电。',
    images: [
      '/static/images/default-avatar.png',
      '/static/images/avatar.jpg',
    ],
    status: 'pending',
    createTime: '2023-06-06 16:10:00',
  },
}

// 页面加载时获取数据
onLoad((options: any) => {
  const recordId = Number(options.id) || 1
  loadRepairDetail(recordId)
})

// 加载维修详情
function loadRepairDetail(id: number) {
  const detail = mockDetailData[id]
  if (detail) {
    repairDetail.value = detail
  }
  else {
    // 如果没有找到对应数据，使用默认数据
    repairDetail.value.id = id
  }
}

// 联系用户
function contactUser() {
  uni.makePhoneCall({
    phoneNumber: repairDetail.value.phone,
  })
}

// 完成维修
function completeRepair() {
  uni.showModal({
    title: '确认完成',
    content: '确认将此维修单标记为已完成？',
    success: (res) => {
      if (res.confirm) {
        repairDetail.value.status = 'completed'
        uni.showToast({
          title: '已完成',
          icon: 'success',
        })
        // 这里可以调用 API 更新状态
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }
    },
  })
}

// 预览图片
function previewImage(index: number) {
  uni.previewImage({
    urls: repairDetail.value.images,
    current: index,
  })
}

// 获取状态显示文本
function getStatusText(status: string) {
  const statusMap = {
    pending: '待处理',
    processing: '处理中',
    completed: '已完成',
  }
  return statusMap[status as keyof typeof statusMap] || '未知状态'
}

// 获取状态样式类
function getStatusClass(status: string) {
  const classMap = {
    pending: 'text-orange-500',
    processing: 'text-blue-500',
    completed: 'text-green-500',
  }
  return classMap[status as keyof typeof classMap] || 'text-gray-500'
}
</script>

<template>
  <view class="repair-detail-page">
    <view class="detail-container">
      <!-- 基本信息 -->
      <view class="form-section">
        <wd-cell-group border>
          <wd-cell title="联系人" :value="repairDetail.contact" />
          <wd-cell title="手机号" :value="repairDetail.phone" />
          <wd-cell title="应急手机号" :value="repairDetail.emergencyPhone" />
          <wd-cell title="户号" :value="repairDetail.houseNumber" />
          <wd-cell title="类别" :value="repairDetail.category" />
          <wd-cell title="维修单号" :value="repairDetail.repairId" />
        </wd-cell-group>

        <!-- 状态和时间信息 -->
        <wd-cell-group border custom-class="mt-3">
          <wd-cell title="报修问题" :value="repairDetail.problem" />
          <wd-cell title="创建时间" :value="repairDetail.createTime" />
          <wd-cell title="当前状态">
            <template #value>
              <view :class="getStatusClass(repairDetail.status)" class="font-medium">
                {{ getStatusText(repairDetail.status) }}
              </view>
            </template>
          </wd-cell>
        </wd-cell-group>
      </view>

      <!-- 原因描述 -->
      <view class="reason-section">
        <view class="reason-title">
          原因
        </view>
        <view class="reason-content">
          {{ repairDetail.reason }}
        </view>
      </view>

      <!-- 图片区域 -->
      <view class="image-section">
        <view class="image-title">
          相关图片
        </view>
        <view class="image-grid">
          <view
            v-for="(image, index) in repairDetail.images"
            :key="index"
            class="image-item"
            @click="previewImage(index)"
          >
            <image
              :src="image"
              mode="aspectFill"
              lazy-load
              class="repair-image"
            />
          </view>
          <!-- 如果图片数量不足4的倍数，添加占位符 -->
          <view
            v-for="i in (4 - (repairDetail.images.length % 4)) % 4"
            :key="`placeholder-${i}`"
            class="image-placeholder"
          />
        </view>
        <view v-if="repairDetail.images.length === 0" class="no-image">
          <view class="no-image-text">
            暂无图片
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="action-buttons pb-safe">
      <wd-button
        type="primary"
        size="large"
        custom-class="complete-btn w-full"
        :disabled="repairDetail.status === 'completed'"
        @click="completeRepair"
      >
        {{ repairDetail.status === 'completed' ? '已完成' : '确认' }}
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.repair-detail-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
}

.detail-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  margin-bottom: 160rpx; // 为底部按钮留出空间
}

.form-section {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
}

.reason-section {
  margin-top: 32rpx;
  background: white;
  border-radius: 16rpx;
  padding: 32rpx;
}

.reason-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 24rpx;
}

.reason-content {
  min-height: 240rpx;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: #666;
  border: 1px solid #e9ecef;
}

.image-section {
  background: white;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  flex-direction: column;
}

.image-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 24rpx;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16rpx;
  width: 100%;
}

.image-item {
  aspect-ratio: 1/1;
  border-radius: 12rpx;
  overflow: hidden;
  border: 1px solid #e9ecef;
  position: relative;
}

.image-placeholder {
  width: calc(25% - 12rpx);
  aspect-ratio: 1/1;
  visibility: hidden;
}

.repair-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  width: 100%;
  height: 200rpx;
  border: 2px dashed #d1d5db;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  margin-top: 16rpx;
}

.no-image-text {
  color: #6b7280;
  font-size: 28rpx;
  font-weight: 500;
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e9ecef;
  display: flex;
  gap: 24rpx;
  z-index: 100;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  padding: 40rpx 60rpx;

  .complete-btn {
    height: 80rpx !important;
    border-radius: 16rpx !important;
    font-size: 32rpx !important;
  }
}

// 状态颜色
.text-orange-500 {
  color: #f59e0b;
}

.text-blue-500 {
  color: #3b82f6;
}

.text-green-500 {
  color: #10b981;
}

.text-gray-500 {
  color: #6b7280;
}
</style>
